<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>读者 - 个人图书馆</title>
  <link rel="stylesheet" href="/static/styles.css">
</head>
<body>
  <h1>读者页面</h1>
  <p><a href="/static/index.html">返回入口</a></p>

  <section>
    <h2>注册 / 登录</h2>
    <form id="registerForm">
      <input id="regName" placeholder="姓名" required>
      <input id="regEmail" type="email" placeholder="邮箱" required>
      <input id="regPassword" type="password" placeholder="密码 (>=6)" required>
      <button type="submit">注册并登录</button>
    </form>
    <div>
      <label>当前用户: <span id="currentUser">未登录</span></label>
      <button id="logoutBtn">登出</button>
    </div>
  </section>

  <section>
    <h2>检索书籍</h2>
    <input id="searchQuery" placeholder="书名或作者">
    <button id="searchBtn">搜索</button>
    <button id="clearSearchBtn">清除</button>

    <h3>书籍列表</h3>
    <table>
      <thead><tr><th>书名</th><th>作者</th><th>ISBN</th><th>可借</th><th>操作</th></tr></thead>
      <tbody id="bookList"></tbody>
    </table>
  </section>

  <section>
    <h2>借阅</h2>
    <form id="borrowForm">
      <label>图书:
        <select id="borrowBook"></select>
      </label>
      <label>借期(天):
        <input id="borrowDays" type="number" min="1" value="14">
      </label>
      <button type="submit">借书</button>
    </form>

    <h3>我的借阅记录</h3>
    <table>
      <thead><tr><th>ID</th><th>书名</th><th>借出</th><th>到期</th><th>已归还</th><th>操作</th></tr></thead>
      <tbody id="borrowList"></tbody>
    </table>
  </section>

  <script src="/static/reader.js"></script>
</body>
</html>